<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<kui-space :gap="[50,0]" direction="column">
				<kui-cell-group title="基本用法">
					<kui-progress :percent="30" color="primary"></kui-progress>
				</kui-cell-group>
				<kui-cell-group title="设置宽度和颜色">
					<kui-progress :percent="30" :line-width="30" color="warning" label-text-color="orange"></kui-progress>
				</kui-cell-group>
				<kui-cell-group title="不显示百分比">
					<kui-progress :percent="30" color="primary" :label="false"></kui-progress>
				</kui-cell-group>
				<kui-cell-group title="标签内显">
					<view class="kui-mb-3">
						<kui-progress :percent="30" :line-width="10" color="primary" label-inside label-inside-text-bottom="1px"></kui-progress>
					</view>
					<view class="kui-mt-5">
						<kui-progress :percent="50" :line-width="20" color="primary" label-inside-text-bottom="1px" label-inside></kui-progress>
					</view>
					<view class="kui-mt-5">
						<kui-progress :percent="70" :line-width="30" color="primary" label-inside label-inside-text-bottom="2px"></kui-progress>
					</view>
				</kui-cell-group>
				<kui-cell-group title="自定义内容內显">
					<kui-progress :percent="50" label-inside :inside-label-style="{bottom: '0px'}">
						<kui-icons type="heart" theme="danger" :size="50"></kui-icons>
					</kui-progress>
				</kui-cell-group>
				<kui-cell-group title="开启进度条动画">
					<kui-progress :percent="30" color="primary" active></kui-progress>
				</kui-cell-group>
				<kui-cell-group title="自定义图标">
					<kui-progress :percent="30" color="primary" icon-name="check_circle" label-text-color="primary" :label-text-size="36"></kui-progress>
				</kui-cell-group>
				<kui-cell-group title="方形进度条">
					<kui-progress :percent="30" shape="square" color="primary"></kui-progress>
				</kui-cell-group>
				<kui-cell-group title="动态改变">
					<kui-progress :percent="state.perecnt" color="#00BC79"></kui-progress>
					<view class="kui-flex kui-justify-center kui-mt-3">
						<kui-button @click="decrease">减少</kui-button>
						<view class="kui-mx-1"></view>
						<kui-button type="primary" @click="add">增加</kui-button>
					</view>
				</kui-cell-group>
				<!-- <kui-cell-group title="环形进度条">
					<kui-progress type="circle" :percent="10" id="circle1"></kui-progress>
				</kui-cell-group> -->
				<kui-cell-group title="环形进度条-动态改变">
					<kui-progress type="circle" :percent="state.circlePercent" id="circle2">
						<text>{{ state.circlePercent }}%</text>
					</kui-progress>
					<view class="kui-flex kui-justify-center kui-mt-3">
						<kui-button @click="decrease('circle')">减少</kui-button>
						<view class="kui-mx-1"></view>
						<kui-button type="primary" @click="add('circle')">增加</kui-button>
					</view>
				</kui-cell-group>
			</kui-space>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		nextTick
	} from 'vue';
	
	export default {
		setup() {
			const state = reactive({
				perecnt: 0,
				circlePercent: 0
			});
			
			const add = (type = '') => {
				nextTick(() => {
					if (type === 'circle') {
						state.circlePercent = state.circlePercent + 20;
						state.circlePercent = state.circlePercent > 100 ? 100 : state.circlePercent;
					} else {
						state.perecnt = state.perecnt + 20;
						state.perecnt = state.perecnt > 100 ? 100 : state.perecnt;
					}
					console.log(state.circlePercent);
				})
			}
			
			const decrease = (type = '') =>  {
				nextTick(() => {
					if (type === 'circle') {
						state.circlePercent = state.circlePercent - 20;
						state.circlePercent = state.circlePercent < 0 ? 0 : state.circlePercent;
					} else {
						state.perecnt = state.perecnt - 20;
						state.perecnt = state.perecnt < 0 ? 0 : state.perecnt;
					}
				})
			}
			
			return {
				// ...toRefs(state),
				state,
				add,
				decrease
			}
		}
	}
</script>

<style>

</style>
